<template>
  <div class="page" id="app">
    <div id="mallPage" class=" mallist tmall- page-not-market ">

      <!-- 头部搜索 -->
      <div id="header" class=" header-list-app">
        <div class="headerLayout">
          <div class="headerCon ">

            <div class="header-extra" style="width: 600px">
              <!--搜索-->
              <div id="mallSearch" class="mall-search" >
                <form name="searchTop" class="mallSearch-form clearfix">
                  <fieldset>
                    <div class="mallSearch-input clearfix">
                      <div class="s-combobox" id="s-combobox-685">
                        <div class="s-combobox-input-wrap">
                          <!--绑定输入的关键词-->
                          <input v-model="keyword" type="text" autocomplete="off" value="dd" id="mq"
                                 class="s-combobox-input" aria-haspopup="true">
                        </div>
                      </div>
                      <!--绑定搜索事件-->
                      <button type="submit" @click.prevent="searchKey()" id="searchbtn">搜索</button>
                    </div>
                  </fieldset>
                </form>

              </div>

            </div>
            <!--                            爬取数据-->
            <div style="float: right;margin-top: -45px">
              <form >
                <!--绑定爬取关键词-->
                <input v-model="keyword1" type="text" autocomplete="off"  >
                <!--绑定爬取数据的事件-->
                <button type="submit" @click.prevent="scrapyKey()" >爬取</button>
              </form>
            </div>

          </div>
        </div>
      </div>

      <!-- 商品详情页面 -->
      <div id="content">
        <div class="main">
          <!-- 商品详情 -->
          <div class="view grid-nosku">

            <div class="product" v-for="result in results">
              <div class="product-iWrap">
                <!--商品封面-->
                <div class="productImg-wrap">
                  <a class="productImg">
                    <img :src="result.img">
                  </a>
                </div>
                <!--价格-->
                <p class="productPrice">
                  <em>{{result.price}}</em>
                </p>
                <!--标题-->
                <p class="productTitle">
                  <a v-html="result.title"></a>
                </p>
                <!-- 店铺名 -->
                <div class="productShop">
                  <span>{{result.shop}} </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchByCrawler",

  data() {
    return {
      goods: [],
    }
  },

  created() {
    // this.goodsList();

  },
  methods: {
    // goodsList() {
    //   let keyword = this.keyword;
    //   // var tempList = [];
    //   var self = this;
    //   this.http.get('search/'+keyword+"/1/10").then(function(response) {
    //     self.goods = response.data;
    //     console.log(self.goods)
    //
    //   }).catch(function(error) {
    //     console.log(error);
    //   })
    //
    // },
    // this.$http.get('search/',{params:{keyword:keyword,}}).then(response => {
    //   console.log("response:"+JSON.stringify(response))
    //   var data = response.data
    //   if (data.code == 200) {
    //     let item = data.data;
    //     console.log("item:"+JSON.stringify(item))
    //   } else {
    //     console.log('失败')
    //   }
    // }),

    //搜索事件
    searchKey(){
      let keyword = this.keyword;
      console.log(keyword);
      this.$http.post
      this.axios.get('search/'+keyword+"/1/10").then(response=>{
        console.log(response);
        this.results = response.data;
      })
    },
    scrapyKey(){
      let keyword1 = this.keyword1;
      // console.log(keyword);
      this.axios.get('parse/'+keyword1).then(response=>{
        location.reload();
      })
    }

  }
}
</script>

<style scoped>

</style>
